<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rap练习生</title>
    <style>
        /*.xian {*/
        /*    background: red;*/
        /*    height: 1px;*/
        /*}*/
        body {
            background-image: url("04.jpg");
            background-size: 100% 100%;
            width: 1400px;
            height: 900px;
        }

        .one {
            background: white;
            width: 400px;
            text-align: center;
            margin: auto;
            border-radius: 15px ;
        }


        .up {
            background: white;
            width: 400px;
            text-align: center;
            margin: auto;
            border-radius: 25px ;
        }

        .center {
            background: white;
            width: 400px;
            text-align: center;
            margin: auto;
            border-radius: 25px ;

        }

        .down {
            background: white;
            width: 400px;
            text-align: center;
            margin: auto;
            border-radius: 25px ;

        }
        button{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <img src="logo.jpg" width="60" height="40">
</div>
<form action="#" method="get" autocomplete="on">
    <div class="one">注册信息
        <hr>
    </div>
    <div class="up">
        <label for="username">昵称:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" required/>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" required/>
        <br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱" required/>
        <br>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" placeholder="请输入年龄" required/>
        <br>
        <label for="tel">电话:</label>
        <input type="tel" id="tel" name="tel" placeholder="请输入电话" required/>
        <br>
        <label for="url">个站:</label>
        <input type="url" id="url" name="url" placeholder="请输入网站地址" required/>
        <br>
    </div>
    <div class="center">
        <label for="gander">性别:</label>
        <input type="radio" id="gander" name="gander" value="男" placeholder="请输入性别" required/>男
        <input type="radio" name="gander" value="女" required/>女
        <input type="radio" name="gander" value="其他" required/>其他
        <br>
        <label for="hobby">爱好:</label>
        <input type="checkbox" id="hobby" name="checkbox" value="唱" placeholder="请输入爱好"/>唱
        <input type="checkbox" name="checkbox" value="跳"/>跳
        <input type="checkbox" name="checkbox" value="rap"/>rap
        <input type="checkbox" name="checkbox" value="篮球"/>篮球
        <br>
        <label for="Chickens">是否鸡你太美:</label>
        <input type="radio" id="Chickens" name="Chickens" value="是" placeholder="请输入" required/>是
        <input type="radio" name="Chickens" value="否" required/>否
        <br>
        <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthday" required/>
        <br>
        <label for="time">当前时间:</label>
        <input type="time" id="time" name="time" required/>
        <br>
        <label for="datetime-local">注册时间:</label>
        <input type="datetime-local" id="datetime-local" name="datetime-local" required/>
        <br>
        <label for="range">律函值:</label>
        <input type="range" id="range" name="range" min="1" max="10" step="1" required/>1~10
        <br>
        <label for="file">上传文件:</label>
        <input type="file" id="file" name="file"/>
        <br>
        <label for="hidden">隐藏信息:</label>
        <input type="hidden" id="hidden" name="hidden" value="中国人" required/>
        <br>
        <select name="city">
            <option>请输入城市</option>
            <optgroup label="省级市"></optgroup>
            <option>常德</option>
            <option>长沙</option>
            <optgroup label="直辖市"></optgroup>
            <option>重庆</option>
            <option>上海</option>
        </select>
        <hr/>
    </div>
    <div class="down">
        <label for="desc">个性签名:</label>
        <textarea id="desc" name="desc" rows="5" cols="40" placeholder="请输入您的个性签名"></textarea>
        <br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </div>
</form>
</body>
</html>